import { useEffect, useMemo } from 'react'
import { Modal, Form, message, Space, Button } from 'antd'
import { VideoCourtSchema } from '@src/components/schema/videoCourt'
import ClipboardJS from 'clipboard'
import style from './style.module.less'
import { CopyOutlined } from '@ant-design/icons'

const { Item } = Form

interface Props {
  visible: boolean
  hide: () => void
  data: VideoCourtSchema | { [k: string]: any }
}

function Main ({ visible, hide, data: d }: Props) {
  const id = useMemo(() => `a${d.id}`, [d])
  useEffect(() => {
    let c: ClipboardJS
    if (visible && id && d.chair_joinuri) {
      setTimeout(() => {
        setTimeout(() => {
          c = new ClipboardJS(`#${id}`, {
            text: () => {
              return d.chair_joinuri
            }
          })
          c.on('success', function (e) {
            message.success('已复制视频会议地址', 1).then(null, null)
          })
        }, 0)
      }, 100)
      return () => {
        c && c.destroy()
      }
    }
  }, [id, d, visible])
  return (
    <Modal
      title='会议信息'
      visible={visible}
      onCancel={() => hide()}
      footer={null}
      destroyOnClose
    >
      <Form labelCol={{ flex: '128px' }} className={style.container}>
        <Item label='会议ID'>
          <Space>
            <span>{d.conferenceid || '无'}</span>
            <Button icon={<CopyOutlined />} id={id}>复制视频地址</Button>
          </Space>
        </Item>
        <Item label='主持人 会议密码'>
          <span>{d.chairpwd || '无'}</span>
        </Item>
        <Item label='非主持人 会议密码'>
          <span>{d.generalpwd || '无'}</span>
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
